/*
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-15 16:19:01
 * @LastEditors: charles
 * @LastEditTime: 2021-11-15 16:28:34
 */
import {connect} from 'react-redux'
import {useEffect} from 'react'

function Article(props){
  const {articles,dispatch} = props;

  useEffect(() => {
    //vuex  - loadArticles(action) -> REFRESH_ARTICLE(commit突变) -> state
    //redux - loadArticles(异步saga) -> REFRESH_ARTICLE(同步reducer) -> state
    dispatch({type:"loadArticles"})
  }, ['articles']);

  return (
    <div>
      <h2>文章管理</h2>
      <div>
        <ul>
          {
            articles.data.list.map(item => {
              return (
                <li key={item.id}>{item.title}</li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}
export default connect(
  state=>{
    return {
      articles:state.articles
    }
  }
)(Article);
